<template>
    <div class="page">
        <!-- 头部导航 -->
        <div class="nav-header">
            <div class="left-icon">
                <van-icon name="arrow-left" size="34" @click="onClickLeft" />
            </div>
            <div class="search-box">
                <van-search
                    v-model="searchValue"
                    placeholder="请输入正确名称（包括材质）"
                    shape="round"
                    @search="onSearch"
                    :style="{ fontSize: '30px' }"
                />
            </div>
            <div class="share-btn" @click="onShareClick">取消</div>
        </div>

        <!-- 内容区域 -->
        <div class="content" v-if="searchResult">
            <!-- 搜索结果展示 -->
            <div class="result-card">
                <div class="result-title">
                    <span class="item-name">{{searchResult.name}}</span>属于
                </div>
                <div class="result-category">
                    <div class="category-icon" :class="getCategoryClass()">
                        <van-icon :name="searchResult.categoryIcon" size="30" />
                    </div>
                    <span class="category-name">{{searchResult.categoryName}}</span>
                </div>
            </div>

            <!-- 投放指南 -->
            <div class="disposal-guide">
                <h3>投放指南</h3>
                <p>{{searchResult.guide}}</p>
            </div>

            <!-- 底部信息 -->
            <div class="source-info">
                <p>华东师范大学生态与环境科学学院联合发布</p>
                <p>如何找到我：美团/美团外卖-我的-垃圾分类（分类仅供参考）</p>
            </div>
        </div>

        <!-- 无结果时显示 -->
        <div class="no-result" v-else>
            <p>暂无相关信息，请尝试其他搜索关键词</p>
        </div>
    </div>
</template>

<script>
import { Icon, Search } from 'vant';

export default {
    name: 'GarbageSearchResult',
    components: {
        [Icon.name]: Icon,
        [Search.name]: Search
    },
    data() {
        return {
            searchValue: '',
            searchResult: null,
            garbageData: {
                // 厨余垃圾示例
                '米饭': {
                    name: '米饭',
                    categoryName: '厨余垃圾',
                    categoryIcon: 'clock-o',
                    guide: '沥干水分后投放，纯流质垃圾（如牛奶）可直接倒进下水口。大骨头、生蚝壳、椰子壳等不是厨余垃圾，而是其他垃圾。'
                },
                '面条': {
                    name: '面条',
                    categoryName: '厨余垃圾',
                    categoryIcon: 'clock-o',
                    guide: '沥干水分后投放，纯流质垃圾（如牛奶）可直接倒进下水口。大骨头、生蚝壳、椰子壳等不是厨余垃圾，而是其他垃圾。'
                },
                '剩菜': {
                    name: '剩菜',
                    categoryName: '厨余垃圾',
                    categoryIcon: 'clock-o',
                    guide: '沥干水分后投放，纯流质垃圾（如牛奶）可直接倒进下水口。大骨头、生蚝壳、椰子壳等不是厨余垃圾，而是其他垃圾。'
                },
                '香蕉皮': {
                    name: '香蕉皮',
                    categoryName: '厨余垃圾',
                    categoryIcon: 'clock-o',
                    guide: '沥干水分后投放，纯流质垃圾（如牛奶）可直接倒进下水口。大骨头、生蚝壳、椰子壳等不是厨余垃圾，而是其他垃圾。'
                },
                '西瓜皮': {
                    name: '西瓜皮',
                    categoryName: '厨余垃圾',
                    categoryIcon: 'clock-o',
                    guide: '沥干水分后投放，纯流质垃圾（如牛奶）可直接倒进下水口。大骨头、生蚝壳、椰子壳等不是厨余垃圾，而是其他垃圾。'
                },
                // 其他垃圾示例
                '铝箔外卖餐盒': {
                    name: '铝箔外卖餐盒',
                    categoryName: '其他垃圾',
                    categoryIcon: 'delete-o',
                    guide: '沥干水分后投放，有油污的一次性外卖包装为其他垃圾，难以辨别类别的垃圾可投入其他垃圾。'
                },
                '一次性筷子': {
                    name: '一次性筷子',
                    categoryName: '其他垃圾',
                    categoryIcon: 'delete-o',
                    guide: '沥干水分后投放，有油污的一次性外卖包装为其他垃圾，难以辨别类别的垃圾可投入其他垃圾。'
                },
                '粽子叶': {
                    name: '粽子叶',
                    categoryName: '其他垃圾',
                    categoryIcon: 'delete-o',
                    guide: '沥干水分后投放，有油污的一次性外卖包装为其他垃圾，难以辨别类别的垃圾可投入其他垃圾。'
                },
                '污损纸巾': {
                    name: '污损纸巾',
                    categoryName: '其他垃圾',
                    categoryIcon: 'delete-o',
                    guide: '沥干水分后投放，有油污的一次性外卖包装为其他垃圾，难以辨别类别的垃圾可投入其他垃圾。'
                },
                '外卖餐盒': {
                    name: '外卖餐盒',
                    categoryName: '其他垃圾',
                    categoryIcon: 'delete-o',
                    guide: '沥干水分后投放，有油污的一次性外卖包装为其他垃圾，难以辨别类别的垃圾可投入其他垃圾。'
                },
                '小龙虾': {
                    name: '小龙虾',
                    categoryName: '其他垃圾',
                    categoryIcon: 'delete-o',
                    guide: '沥干水分后投放，有油污的一次性外卖包装为其他垃圾，难以辨别类别的垃圾可投入其他垃圾。'
                },
                '塑料袋': {
                    name: '塑料袋',
                    categoryName: '其他垃圾',
                    categoryIcon: 'delete-o',
                    guide: '沥干水分后投放，有油污的一次性外卖包装为其他垃圾，难以辨别类别的垃圾可投入其他垃圾。'
                },
                '喝过的奶茶杯': {
                    name: '喝过的奶茶杯',
                    categoryName: '其他垃圾',
                    categoryIcon: 'delete-o',
                    guide: '沥干水分后投放，有油污的一次性外卖包装为其他垃圾，难以辨别类别的垃圾可投入其他垃圾。'
                },
                // 可回收物示例
                '塑料瓶': {
                    name: '塑料瓶',
                    categoryName: '可回收物',
                    categoryIcon: 'exchange',
                    guide: '废纸投放时避免揉团；饮品塑料杯、外卖塑料餐盒、瓶罐等，请清洁后投放。'
                },
                '纸箱': {
                    name: '纸箱',
                    categoryName: '可回收物',
                    categoryIcon: 'exchange',
                    guide: '废纸投放时避免揉团；饮品塑料杯、外卖塑料餐盒、瓶罐等，请清洁后投放。'
                },
                '洁净塑料杯': {
                    name: '洁净塑料杯',
                    categoryName: '可回收物',
                    categoryIcon: 'exchange',
                    guide: '废纸投放时避免揉团；饮品塑料杯、外卖塑料餐盒、瓶罐等，请清洁后投放。'
                },
                '易拉罐': {
                    name: '易拉罐',
                    categoryName: '可回收物',
                    categoryIcon: 'exchange',
                    guide: '废纸投放时避免揉团；饮品塑料杯、外卖塑料餐盒、瓶罐等，请清洁后投放。'
                },
                '玻璃瓶': {
                    name: '玻璃瓶',
                    categoryName: '可回收物',
                    categoryIcon: 'exchange',
                    guide: '废纸投放时避免揉团；饮品塑料杯、外卖塑料餐盒、瓶罐等，请清洁后投放。'
                },
                '报纸': {
                    name: '报纸',
                    categoryName: '可回收物',
                    categoryIcon: 'exchange',
                    guide: '废纸投放时避免揉团；饮品塑料杯、外卖塑料餐盒、瓶罐等，请清洁后投放。'
                },
                // 有害垃圾示例
                '过期药品': {
                    name: '过期药品',
                    categoryName: '有害垃圾',
                    categoryIcon: 'warning-o',
                    guide: '易破损的请打包固定后投放，易挥发的（如过期药液）请密封后投放。'
                },
                '废电池': {
                    name: '废电池',
                    categoryName: '有害垃圾',
                    categoryIcon: 'warning-o',
                    guide: '易破损的请打包固定后投放，易挥发的（如过期药液）请密封后投放。'
                },
                '灯管': {
                    name: '灯管',
                    categoryName: '有害垃圾',
                    categoryIcon: 'warning-o',
                    guide: '易破损的请打包固定后投放，易挥发的（如过期药液）请密封后投放。'
                },
                '水银温度计': {
                    name: '水银温度计',
                    categoryName: '有害垃圾',
                    categoryIcon: 'warning-o',
                    guide: '易破损的请打包固定后投放，易挥发的（如过期药液）请密封后投放。'
                }
            }
        };
    },
    created() {
        // 从URL参数中获取搜索词
        const query = this.$route.query.q;
        if (query) {
            this.searchValue = query;
            this.searchItem(query);
        }
    },
    methods: {
        onClickLeft() {
            this.$router.go(-1);
        },
        onShareClick() {
            // 分享功能实现
            console.log('分享功能');
        },
        onSearch() {
            // 搜索后更新URL
            this.$router.replace({
                path: '/garbage/search',
                query: { q: this.searchValue }
            });
            this.searchItem(this.searchValue);
        },
        searchItem(keyword) {
            // 在预定义的垃圾数据中搜索
            if (this.garbageData[keyword]) {
                this.searchResult = this.garbageData[keyword];
            } else {
                // 模糊匹配搜索
                for (const key in this.garbageData) {
                    if (key.includes(keyword) || keyword.includes(key)) {
                        this.searchResult = this.garbageData[key];
                        return;
                    }
                }
                // 没有找到结果
                this.searchResult = null;
            }
        },
        getCategoryClass() {
            if (!this.searchResult) return '';
            
            switch(this.searchResult.categoryName) {
                case '厨余垃圾':
                    return 'kitchen-waste';
                case '其他垃圾':
                    return 'other-waste';
                case '可回收物':
                    return 'recyclable';
                case '有害垃圾':
                    return 'hazardous';
                default:
                    return '';
            }
        }
    }
};
</script>

<style lang="less" scoped>
.page {
    width: 750px;
    margin: 0 auto;
    background: #f5f5f5;
    min-height: 100vh;
    padding-bottom: 100px;
}

.nav-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 111px;
    background-color: #fff;
    display: flex;
    align-items: center;
    padding: 0 16px;
    z-index: 100;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    width: 750px;
    margin: 0 auto;

    .left-icon {
        width: 40px;
        display: flex;
        align-items: center;
    }
    
    .search-box {
        flex: 1;
        margin: 0 14px;
        
        :deep(.van-search) {
            padding: 0;
            background: transparent;
        }
        
        :deep(.van-search__content) {
            border-radius: 36px;
            background: #f8f8f8;
            height: 70px;
            padding: 0 16px;
            display: flex;
            align-items: center;
        }
        
        :deep(.van-field__control) {
            height: 70px;
            line-height: 70px;
            font-size: 28px;
        }
        
        :deep(.van-icon-search) {
            font-size: 32px;
            line-height: 70px;
            display: flex;
            align-items: center;
        }
        
        :deep(.van-field__left-icon) {
            display: flex;
            align-items: center;
            height: 100%;
        }
    }
    
    .share-btn {
        width: 110px;
        font-size: 28px;
        color: #333;
        text-align: center;
    }
}

.content {
    margin-top: 108px;
    padding: 24px;
    background-color: #fff;
}

.result-card {
    background-color: #fff;
    border-radius: 12px;
    padding: 32px;
    margin-bottom: 24px;
    text-align: center;
    
    .result-title {
        font-size: 32px;
        color: #333;
        margin-bottom: 24px;
        
        .item-name {
            color: #ff8200;
            font-weight: bold;
        }
    }
    
    .result-category {
        display: flex;
        flex-direction: column;
        align-items: center;
        
        .category-icon {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-bottom: 16px;
            
            &.kitchen-waste {
                background-color: #4d8e64;
                color: #fff;
            }
            
            &.other-waste {
                background-color: #333;
                color: #fff;
            }
            
            &.recyclable {
                background-color: #1a6ca8;
                color: #fff;
            }
            
            &.hazardous {
                background-color: #e05b5b;
                color: #fff;
            }
        }
        
        .category-name {
            font-size: 36px;
            font-weight: bold;
        }
    }
}

.disposal-guide {
    background: #f9f9f9;
    padding: 24px;
    border-radius: 12px;
    margin-top: 24px;
    
    h3 {
        font-size: 30px;
        margin: 0 0 16px;
        font-weight: bold;
    }
    
    p {
        font-size: 28px;
        line-height: 1.6;
        color: #666;
        margin: 0;
    }
}

.no-result {
    margin-top: 108px;
    padding: 48px 24px;
    text-align: center;
    
    p {
        font-size: 30px;
        color: #999;
    }
}

.source-info {
    margin-top: 60px;
    text-align: center;
    
    p {
        font-size: 24px;
        line-height: 1.6;
        color: #999;
        margin: 8px 0;
    }
}
</style> 